<template>
  <div>
    <div class="se-top">常见场景计算</div>
    <div class="se-box">
      <div class="se-item" v-for="item in items" @click="clickItem(item)">
        <img :src="item.icon" alt="">
        <p class="se-text">{{item.title}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Scene",
    data() {
      return {
        items: [
          {
            title: '个税计算',
            icon: require('@res/img/scene/person_tax.png'),
            path: '/person_tax'
          },
          {
            title: '理财计算',
            icon: require('@res/img/scene/money_save.png'),
            path: '/deposit'
          },
          {
            title: '房贷计算',
            icon: require('@res/img/scene/house_loan.png'),
            path: '/house'
          },
          {
            title: '养老金计算',
            icon: require('@res/img/scene/elderly.png'),
            path: '/eldly'
          },
          {
            title: 'BMI计算',
            icon: require('@res/img/scene/bmi.png'),
            path: '/bmi'
          },
          {
            title: '岁月计算',
            icon: require('@res/img/scene/times.png'),
            path: '/age'
          },
        ]
      }
    },
    methods: {
      clickItem(item) {
        let 公积金 = item.path
        console.log('click item :', item.path);
        this.$router.push(item.path)
      }
    },
  }
</script>

<style scoped>
  .se-box {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 2rem 1rem;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
  }

  .se-item {
    width: 42%;
    margin: 1rem;
    height: 20vh;
  }

  .se-item > img {
    width: 3.2rem;
    height: 3.2rem;
  }

  .se-text {
    line-height: 4rem;

  }

  .se-top {
    width: 100%;
    background-color: #3fb0f8;
    line-height: 5rem;
    font-size: 1.7rem;
    color: white

  }

</style>
